<template>
  <view class="journal-container">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="book-name">游记</text>
    </view>
    <view class="header-actions">
      <uni-icons
        fontFamily="iconfont"
        class="menu"
        :size="30"
        @click="onMenu"
      >{{"\ueb10"}}</uni-icons>
      <uni-icons
        fontFamily="iconfont"
        class="close"
        :size="30"
        @click="onClose"
      >{{"\ueb79"}}</uni-icons>
    </view>

    <!-- 标签栏（时间线、心愿单、笔记） -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>

    <!-- 时间线内容 (TimelineCard 卡片)-->
	<view v-if="currentTab===0">
		<TimelineCard :timeline="timeline" />
	</view>
	
	<!-- 目录按钮 -->
	<view class="menu-list">
		<uni-icons fontFamily="iconfont" :size="35">{{'\ue890'}}</uni-icons>
	</view>
	
    <!-- 心愿单内容 -->
    <view class="wishlist-section" v-if="currentTab === 1">
      <!-- 全部心愿文字 + 图标 -->
      <view class="wishlist-top">
        <text class="all-wishes-text">全部心愿</text>
        <uni-icons
          type="list"
          size="20"
          color="#000"
          class="all-wishes-icon"
        />
      </view>
      <!-- 插画、文案区域 -->
      <view class="wishlist-illustration">
        <image
          src="/static/images/wishlist-jar.png" 
          mode="widthFix"
          class="jar-img"
        />
        <text class="main-text">许下心愿，保持期待</text>
        <text class="sub-text">提前标记想去的地方\n存档印象深刻的小店</text>
      </view>
      <!-- 底部橙色 + 按钮 -->
      <view class="add-wish-btn" @click="onAddWish">
        <text class="plus-icon">+</text>
      </view>
    </view>


    <!-- 底部操作栏-->
    <view class="bottom-bar"v-if="currentTab==0">
      <view
        v-for="(action, index) in bottomActions"
        :key="index"
        class="bottom-action"
        @click="onBottomAction(index)"
      >
        <uni-icons fontFamily="iconfont"  :size="35">{{ `${action.unicode}` }}</uni-icons>
        <text class="action-text">{{ action.text }}</text>
		<view 
		      class="divider" 
		      v-if="index !== bottomActions.length - 1"
		    ></view>
      </view>
    </view>
  </view>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import TimelineCard from '@/components/TimelineCard.vue'//引入自定义组件

//时间线数据
interface TimelineItem {
  mouth:number;
  day:number;
  label: string;
  schedule: string | null;
}
const timeline = ref<TimelineItem[]>([
  { mouth: 8,day:12 ,label: 'Day 1', schedule: null },
  { mouth: 8,day:13, label: 'Day 2', schedule: null },
]);

const currentTab = ref(0); 
const tabs = ref(['时间线', '心愿单', '笔记']);

// 切换标签
const switchTab = (index: number) => {
  currentTab.value = index;
};

// 关闭页面
const onClose = () => {
  uni.navigateBack();
};

// 菜单点击
const onMenu = () => {
  console.log('点击了菜单');
};

// 新增：添加心愿逻辑（可跳转编辑页面等）
const onAddWish = () => {
  console.log('点击了添加心愿');
};

//定义底部action栏的数据结构
interface BottomAction {
	unicode:string
	text:string
}
// 底部操作点击逻辑
const bottomActions = ref<BottomAction[]>([
  { unicode: '\ue666', text: '记录笔记' },
  { unicode: '\ue654', text: '编辑时间线' },
  { unicode: '\ue64f', text: '添加心愿' },
]);
const onBottomAction = (index: number) => {
  switch (index) {
    case 0:
      console.log('记录笔记');
      break;
    case 1:
      console.log('编辑时间线');
      break;
    case 2:
      console.log('添加心愿');
      break;
  }
};
</script>

<style lang="scss" scoped>
	
.journal-container {
  background-color: #fff;
  min-height: 100vh;
  padding: 16rpx;
  position: relative;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 5rpx;
  .book-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
  }
}
.header-actions {
  position: absolute;
  top: 35rpx;
  right: 20rpx;
  .menu {
    background-color: #ECF8F4;
    margin-right: 10rpx;
    border-radius: 50rpx;
    padding: 5rpx;
  }
  .close {
    background-color: #ECF8F4;
    border-radius: 50rpx;
    padding: 5rpx;
    font-weight: bold;
  }
}

/* 标签栏 */
.tab-bar {
  display: flex;
  margin: 20rpx 0;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 12rpx 0;
    font-size: 28rpx;
    color: #999;
    border-radius: 20rpx;
    margin: 0 10rpx;
    background-color: #ECF8F4;
    &.active {
      color: #000;
      background-color: #C3E7DA;
      font-weight: bold;
    }
  }
}

/*目录菜单*/
.menu-list{
	position: absolute;
	top: 180rpx;
	right: 10rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	width: 50rpx;
	height: 50rpx;
	background-color:#ECF8F4 ;
	border-radius: 5rpx;
	
	&:active {
	  transform: scale(0.98);
	  opacity: 0.5;
	}

	.uni-icons{
		font-weight: bold;
		margin: 8rpx 10rpx 10rpx 10rpx;
	}
	
}


/* 心愿单页面样式 */
.wishlist-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200rpx); /* 留出顶部和底部空间 */
  .wishlist-top {
    display: flex;
    align-items: center;
    align-self: flex-end;
    margin-right: 20rpx;
    margin-top: 20rpx;
    .all-wishes-text {
      font-size: 24rpx;
      color: #999;
      margin-right: 10rpx;
    }
    .all-wishes-icon {
      color: #999;
    }
  }
  .wishlist-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100rpx;
    .jar-img {
      width: 200rpx; 
    }
    .main-text {
      font-size: 28rpx;
      color: #333;
      margin-top: 40rpx;
      font-weight: bold;
    }
    .sub-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 20rpx;
      text-align: center;
      line-height: 40rpx;
    }
  }
  .add-wish-btn {
    width: 100rpx;
    height: 100rpx;
    background-color: #FF9F00;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 60rpx;
    right: 40rpx;
    .plus-icon {
      font-size: 60rpx;
      color: #fff;
    }
  }
}


/* 底部操作栏 */
.bottom-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ECF8F4;
  padding: 16rpx;
  border-radius: 30rpx;
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;
  height: 100rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  
  .bottom-action {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	flex: 1;
	height: 100%;
	position:relative;
	padding: 0 10rpx;
	
	::v-deep .uni-icon{
		font-size:36rpx !important;
	}

    .action-text {
      margin-top: 8rpx;
	  font-size: 24rpx;
	  color: #666;
    }
	
	.divider {
		position: absolute;
		right: 0;
		top: 25%;
		height: 50%;
		width: 1rpx;
		background-color:#C9E2D6 ;
	}
  }
}
</style>